import React, { useState } from 'react'
import style from './Search.module.scss'
const Search = (props) => {
  // console.log(props)
  const [showCancel,setShowCancel] = useState(false)
  const onChange = props.onChange
  const onCancel = props.onCancel
  return (
    <div className={style.searchWrap}>
      <header>
        <span>🔍</span>
        <input 
        className={style.input} 
        type="text" placeholder='输入城市名或拼音' 
        onFocus={() => setShowCancel(true)}
        onChange = {e => onChange(e.target.value)}
        />
      </header>
      {showCancel && <p className={style.cancel} onClick={() => {
        setShowCancel(false)
        onCancel()
      }
        }>取消</p>}
      
    </div>

  )
}

export default Search